<template style="height: 100%;">
	<!-- 设置导航栏 -->
	<van-nav-bar
	  title="登录"
	  left-arrow
	  @click-left="onClickLeft"
	/>
	<div class="contain" >
		<img class="imgs" id="pic" :src="imgArr[0]">
		<!-- 登录界面表单 -->
		<van-form style="margin: auto;" @submit="onSubmit">

			<!-- 输入框 -->
			<van-cell-group inset>
				<van-field @click="one()" v-model="username" name="用户名" label="用户名" placeholder="请输入用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field @click="two()" v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
			</van-cell-group>
			
			<!-- 复选框 -->
			<div class="checkbox">
				<van-checkbox v-model="checked" shape="square" checked-color="#FFB5C5" >记住密码
					<a href="http://wwww.baidu.com" style="color: #FFB5C5 ;position: absolute; right: 0; margin-right: 4%;">忘记密码?</a>
				</van-checkbox>
			</div>
			
			<!-- 登录注册按钮 -->
			<van-button @click="showPopup" plain round color="#FFB5C5" style="width: 46%; margin-left: 2.5%;" class="bt">
						注册
			</van-button>
			<van-button @click="login()" round color="#FFB5C5" style="width: 46%; float: right; margin-right: 2.5%;" native-type="submit" >
						登录
			</van-button>			
			
		</van-form>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { Toast } from 'vant';
	import 'vant/es/toast/style';
	import { Notify } from 'vant';
	import 'vant/es/notify/style';
	import {login} from "@/api/user.ts";
	import router from '@/router';

	const checked = ref(true)
	const show = ref(false);
	const showPopup = () => {
	  show.value = true;
	};
	const VanNotify = Notify.Component;
	const onClickLeft = () => history.back();
	
	var imgArr=[
	  "../src/assets/images/login.png",
	  "../src/assets/images/login_passwd.png"
	];
	 
	function one(){
	  const msg=document.getElementById("pic");
	  msg.src=imgArr[0];
	};
	 
	function two(){
	  const msg=document.getElementById("pic");
	  msg.src=imgArr[1];
	}
	
	
	// 验证登录有效性
	const username = ref("")
	const password = ref("")
	const onSubmit = (values) => {
		console.log('submit', values);
		login(values)
			.then(res => {
				if (res.code != 0) {
					Toast.success('登录成功')
					router.push("/dashboard/home")
				} else {
					Toast.fail('登录失败')
					console.log(res.message)
				}
			})
			.catch(err => {
				console.log(err)
			})
	
	};
	
	// 验证注册信息有效性
	function checkpasswd (){
		var repassword1 = document.getElementById("pw").value;
		var repassword2 = document.getElementById("repw").value;
		var reusername = document.getElementById("user").value;
		
		if (reusername == [] || repassword1 == [] || repassword2 == []){
			Notify({ type: 'danger', message: '请输入用户名和密码' });
		}
		else if (repassword1 == repassword2 ) {
		    Notify({ type: 'success', message: '创建成功' });
			console.log(repassword1)
		}
		else{
			Notify({ type:'danger', message: '两次输入的密码不一致！' });
		    }
	}
</script>


<style>
	*{
		font-size: 16px;
	}
	html,body,#app{
		height: 100%;
	}
	  
	.contain {
	    height: 100%;
	    background-color: #F0F8FF; 
	}
	
	:root {
		--van-button-round-border-radius: 5px;
		--van-nav-bar-background-color: #FFB5C5;
		--van-nav-bar-height:72px;
		--van-nav-bar-title-text-color:white;
		--van-nav-bar-title-font-size:20px;
		--van-nav-bar-arrow-size:20px;
		--van-notify-line-height:60px;
		--van-popup-close-icon-color:white;
		--van-popup-close-icon-margin:10px;
		--van-checkbox-size:16px
	}
	  
	.van-icon-arrow-left {
	  		color: var(--nav-bar-icon-color, #FFF) !important;
	  	}
	
	.imgs {
		display:block;
		margin: 0 auto;
		width: 95%;
	}
	
	.checkbox {
		margin: 2% 2.5%
	}
</style>
